<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
	 .container {
	 width: 400px;
	 margin: 0 auto;
	 text-align: center;
	 }
	
	 .square {
	 width: 200px;
		 height: 200px;
	 background-color: red;
		 margin: 0 auto;
	 }
		 </style>
		1<div id="app" class="container">
		 <div class="square" v-show="show"></div>
		 <br />
		 <button @click="toggle()">点击切换</button>
		 <!-- <button v-on:click="toggle()">点击切换</button> -->
		 </div>
		 <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		 <script>
		 const app = new Vue({
		 el: "#app",
		 data: {
		 show : true
		 },
		 // 事件函数需定义在 methods 中
		 methods: {
	  // ES6 对象函数的简写方式
	 toggle () {
	 this.show = !this.show;
	}
	 }
	 });
	 </script>
	</body>
</html>
